<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>排行榜</title>
    <script src="../vendors/jquery/jquery.js"></script>
    <script src="../script/api.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <script type="text/javascript" src="../vendors/vue/vue.js"></script>
    <link href="../bootstrap-paginator/css/bootstrap.min.css" rel="stylesheet" />
    <script type="text/javascript" src="../bootstrap-paginator/js/bootstrap-paginator.js"></script>
    <link href="../Content/normalize.css" rel="stylesheet" />
    <link href="../Content/htmleaf-demo.css" rel="stylesheet" />
    <link href="../Content/style.css" rel="stylesheet" />
    <style>
        .border {
           width: 100%;
           float: left;

           margin-bottom: 15px;
           text-align: center;
           display: block;
        }

       .img {
           width: 95%;
           display: block;
           padding-left: 18px;
       }

     a {
         text-decoration: none;
       }
    </style>
</head>
<script type="text/javascript">
    apiready=function(){

    };
    var vm =new Vue({
       el: '#app',
       methods: {
            search:function(keyword){
              $.ajax({
                  url: 'http://47.99.62.128/api/MMView/GetInfoPage',
                  type: 'GET',
                  asyn: false,
                  data: { keyword: keyword, order: 'scanCount', pageIndex: 1, pageSize: 10 },
                  success: function (pageData) {
                      var pageList = pageData.list;
                      var html = "";
                      for (var i = 0; i < pageList.length; i++) {
                          html += '<div class="border" id="' + pageList[i].memo + '" onclick="ClickDetail(this)"><h5>' + pageList[i].title + '</h5><img src="' + pageList[i].src + '" class="img"></div>';
                      }
                      $('.main').html(html);

                      var currentPage = 1;
                      var pageCount = parseInt(pageData.count / 10);

                      if (pageData.count % 10 != 0)
                          pageCount = pageCount + 1;

                      var options = {
                          bootstrapMajorVersion: 3, //版本
                          currentPage: currentPage, //当前页数
                          totalPages: pageCount, //总页数
                          size: "small",
                          itemTexts: function (type, page, current) {
                              switch (type) {
                                  case "first":
                                      return "首页";
                                  case "prev":
                                      return "上一页";
                                  case "next":
                                      return "下一页";
                                  case "last":
                                      return "末页";
                                  case "page":
                                      return page;
                              }
                          },//点击事件，用于通过Ajax来刷新整个list列表
                          onPageClicked: function (event, originalEvent, type, page) {
                              $.ajax({
                                  url: 'http://47.99.62.128/api/MMView/GetInfoPage',
                                  type: 'GET',
                                  asyn: false,
                                  data: { keyword: keyword, order: 'scanCount', pageIndex: page, pageSize: 10 },
                                  dataType: 'Json',
                                  success: function (pageData) {
                                      var pageCount = parseInt(pageData.count / 10);

                                      if (pageData.count % 10 != 0)
                                          pageCount = pageCount + 1;

                                      options.totalPages = pageCount;
                                      var pageList = pageData.list;
                                      var html = "";
                                      for (var i = 0; i < pageList.length; i++) {
                                          html += '<div class="border" id="' + pageList[i].memo + '" onclick="ClickDetail(this)"><h5>' + pageList[i].title + '</h5><img src="' + pageList[i].src + '" class="img"></div>';
                                      }
                                      $('.main').html(html);
                                  }
                              });
                          }
                      }

                      $('#pager').bootstrapPaginator(options);
                  }
              });
            }
          }
        });
    vm.search('');
    function ClickDetail(div) {
        id = $(div)[0].id;
        api.openWin({
         name: 'detail',
         url: "frame2.html?id=" + id
        });
    }

</script>
<body>
  <div class="search d1" id="app">
      <form style="float:left;margin-left:18px;">
          <input id="searchText" style="margin-top:25px" type="text" placeholder="请输入你想看的MM...">
          <button type="button" style="margin-top:25px" id="searchBtn"></button>
      </form>
  </div>
  <div class="main" style="display:inline-block">

  </div>
  <div style="margin-left:18px;">
      <ul id="pager"></ul>
  </div>
</body>
</html>
